<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<%@include file="/WEB-INF/views/include/root.jsp"%>
<html>
	<head>
		
	</head>
	 <body  style="padding-top:52px;">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	     	 <a class="navbar-brand" href="#">圛圛圛圛</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div id="navbar" class="collapse navbar-collapse">
	      <ul class="nav navbar-nav">
	     
	      	<c:forEach items="${menuCategoryList}" var="mc">
	      	<li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">${mc.name } <span class="caret"></span></a>
		          <ul class="dropdown-menu" role="menu">
					<c:forEach items="${mc.menus}" var="menu">
						<li><a href="#" onclick="createTab('tab_${menu.id}','${ctx}/${menu.href}','${menu.name}')">${menu.name }</a></li>
					</c:forEach>
		          </ul>
		        </li>
	      	</c:forEach>
	      </ul>
	      <ul class="nav navbar-nav navbar-right">
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown">欢迎您：${loginName} <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="${ctx }/logout">退出登录</a></li>
	            <li><a href="${ctx }/sys/user/passwordChange">密码修改</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
		<div>
		<!-- Nav tabs -->
		<ul class="nav nav-tabs" role="tablist" id="maintab">
		  <li class="active"><a href="#home">首页</a></li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content" id="maintab-content">
		  	<div class="tab-pane active" id="home"><iframe frameborder=0 class="mainFrame" src="${ctx }/home" width="100%"></iframe></div>
		</div>
	</div>
	<script type="text/javascript">
     function getWindowSize(){
		return ["Height","Width"].map(function(name){
		 return window["inner"+name] ||
		   document.compatMode === "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ];
		});
	  };
	  function windowResize() {
		var sizeStr=getWindowSize().toString().split(",");
        $(".mainFrame").height(sizeStr[0]-$("#navbar").height()-90);
	  }
	  function createTab(tabid, url, name) {
	  	 if($("#" + tabid).length == 0) {
	  	 	var tabStr = '<li><a href="#' + tabid + '">' + name + '<button onclick="removeTab(this,'+ tabid +');" class="close" type="button" ' + 'title="删除此页">×</button>' + '</a></li>';
	  	 	$("#maintab").append($(tabStr));
	  	 	var tabContentStr = '<div class="tab-pane" id="' + tabid + '"><iframe frameborder=0 class="mainFrame" src="' + url + '" width="100%"></iframe></div>';
	  	 	$("#maintab-content").append($(tabContentStr));
	  	 }
	     $('#maintab a[href="#' + tabid + '"]').tab('show');
	     windowResize();
	  };
	  function removeTab(obj,tabid) {
	  	$(obj).parents('li').remove('li');
	  	$(tabid).remove();
	  	 $('#maintab a:first').tab('show');
	  };
      $(document).ready(function() {
		$("#maintab").on("click", "a", function(e) {
			e.preventDefault();
			$(this).tab('show');
		});
		$(window).resize(function(){
			windowResize();
		});
	     windowResize();
      });
    </script>
   </body>
</html>